/* 我要理财 */
.invest-banner { height:400px; overflow:hidden;
	img { @include abs(-360px,0); display: block; width:1920px; height:400px; }
	.ani-t { position:absolute; background:url(../images/invest/title.png) no-repeat; width:600px; height:100px; }
	.ani-01 { left:128px;  top:113px; background-position:0 0px; }
	.ani-02 { left:128px;  top:219px; background-position:0 -100px; }
}
.invest-list-wrap { @extend .clearfloat; padding-bottom:100px; 
	.invest-menu { width:200px; background:#fff; @extend .boxshadow01;
		li { position: relative; width:200px; box-sizing: border-box;  padding:15px 0px 15px 35px ; font-size:14px; color: #999; border-bottom:1px solid #ddd;
			h4 { font-size:18px; color:#666; letter-spacing:1px; }
			&.current { background:#f3f3f3;
				h4 { color: $red; }
				&:after{
					display: block;
				}
			}
			&:hover {  background:#f3f3f3;
				h4 { color: $red; }

			}
			&:after{
				content:"";
				display: none;
				position: absolute;
				left:0;
				top:0;
				width:10px;
				height:100%;
				background:#e74444;
			}
		}
	}
	.invest-list-right { width:980px; 
		.invest-sort {  background:#fff; line-height:60px; @extend .clearfloat; padding:0 20px;  vertical-align: middle; font-size:14px;
			a { margin:0 10px; color: #999;font-size:14px;
				i { margin-left:5px; @extend .icon; display:inline-block; width:15px; height:14px;  vertical-align: middle; background-position:0 -400px; }
				&.current { color:$red; }
				&.current-top i { background-position:-100px -400px; }
				&.current-bottom i { background-position:-200px -400px; }
			}
			.look-refund { font-size:12px; color:$red;
				&:hover { text-decoration:underline; }
			}
		}
		// .h4 { }
		.invest-list {
			.not-data{
				background:#fff;
				margin-top:10px;
				text-align:center;
				padding:50px 0;
				p{
					margin-top:10px;
					font-size:24px;
				}
			}
			.invest-list-item {background:#fff;  border-top:1px solid #eee; padding:0 20px 20px 20px; margin-top:10px;
				h4 { font-size:20px; line-height:50px; vertical-align:middle; border-bottom:1px solid #f1f1f1; 
					.ticket { font-size:12px; border:1px solid $red; color:$red; margin-left:10px; vertical-align:middle; line-height:18px; border-radius:4px; padding:0 5px; display: inline-block; }
					.ticket-rate { border-color:$orange; color: $orange;  }
				}
				.info { @extend .clearfloat; padding-top:20px;
					.fl { margin-top:10px; }
					.p1 { font-size:16px;
						em { font-size:20px; }
					}
					.p2{margin-top:20px; color:#888; font-size:14px;}
					.rate { width:200px;
						.p1 { color:$red; font-size:20px; 
							em { font-size:30px; margin-right:4px; }
						}
					}
					.cycle ,.total { width:150px; }
					.progress-wrap { width:210px; margin-right:20px; line-height:24px;
						.progress { 
							.progress-bar { float:right; color: $blue; width:150px;
								span { float:left; margin-top:6px; margin-right:5px; position:relative; width:100px; background:#ccc; height: 10px; border-radius:5px; overflow:hidden; 
									i { @include abs0; height:100%; background:$blue; }
								}
							}
						}
						em { color: $red; font-size:14px; }
					}
					.invest-status { width:160px; margin-right:20px;  line-height:24px;
						.btn { margin-top:10px; letter-spacing:4px; display: block; color: #fff; background:$red; text-align:center; width:160px; font-size:14px; line-height:36px; border-radius:4px; @extend .boxshadow01;  }
					}
					.invest-status-02 { 
						.progress .progress-bar { color: $orange; 
							span i { background:$orange; }
						}
						em { color: $orange; }
						.btn { background:$orange; }
					}
					.invest-status-03 { 
						.progress .progress-bar { color: $graylight; 
							span i { background:$graylight; }
						}
						em { color: $graylight; }
						.btn { background:$graylight; }
					}
					.invest-status-04 { 
						.progress .progress-bar { color: $graylight; 
							span i { background:$graylight; }
						}
						em { color: $graylight; }
						.btn { background:$graylight; }
					}
					
				}
			}
		}
	}
}


/*投资详情*/
.invest-detail { padding-bottom:40px; font-size:14px;
	.financ-info{ background:#fff; height:326px; border:1px solid #ebebeb;}
	.financ-info-left{width:781px;}
	.financ-info-right{width: 416px; border-left:1px solid #ebebeb;}
	.financ-info-hd{height:52px; line-height: 52px; border-bottom: 1px solid #ebebeb; padding:0 30px;}
	.financ-info-left-top{border-bottom: 1px solid #ebebeb; padding:20px 30px;}
	.financ-info-left-top dl{float:left;}
	.financ-info-left-top .earnings,.financ-info-left-top .borrow-amount{width:210px;}
	.financ-info-left-top .lock-day,.financ-info-left-top .percentage{width:150px;}
	.financ-info-left-top dt{color:#888;}
	.financ-info-left-top dd{margin-top:20px; font-size:24px;}
	.financ-info-left-top dd span{font-size:14px;}
	.financ-info-left-bottom{padding:20px 30px;}
	.financ-info-left-bottom li{float:left; width:50%; height:40px; line-height: 40px;}
	.financ-info-left-bottom .label{color:#888;}
	.financ-info-left-bottom .line{color:#ebebeb; margin:0 10px;}
	.financ-info-right{height:100%;}
	.financ-info-right .purchase{padding:30px 50px; display:inline-block;}
	.financ-info-right .user-amount dt{float:left;}
	.financ-info-right .remaining-amount{margin-top:40px; color:#888;}
	.financ-info-right .buy-input{width:315px; margin-top:20px; position: relative;}
	.financ-info-right .buy-input input{width:315px; height:35px; display:block; border:2px solid #dbdbdb; line-height: 35px; text-indent: 20px;}
	.financ-info-right .buy-btn a{height:40px; line-height: 40px;}
	.financ-info-right .possess,.financ-info-right .pending{width:319px; height:52px; margin-top:20px; line-height: 52px; text-align: center; font-size:24px;}
	.financ-info-right .possess{color:#fff; background:#26c452; }
	.financ-info-right .pending{background:#ccc;}
	.financ-info-right .coupon span{color:#999;}

	.financ-detail{background:#fff; border:1px solid #ebebeb; margin-top:64px; position: relative;}
	.financ-detail-tab{background:#fff; position: relative; position: absolute; top:-55px; border-left:1px solid #ebebeb;}
	.financ-detail-tab li{height:53px; line-height: 53px; position: relative; float:left; border-top:2px solid #ebebeb; border-bottom: 1px solid #ebebeb; border-right:1px solid #ebebeb;}
	.financ-detail-tab li a{display: block; padding:0 45px;}
	.financ-detail-tab li.active:before{content:" "; display: block; width: 100%; height:2px; position: absolute; top:-1px; left:0; z-index: 2; background:#da0d0d;}
	.financ-detail-tab li.active{border-bottom-color:#fff;}
	.financ-detail-box{display: none; padding:40px;}
	.detail_title { margin-bottom:30px;
		h5 { padding-left:8px; border-left:4px solid $red; font-weight:border; line-height:1.1; margin-bottom:10px; font-size:16px; }
	}
	.loan-info ul{width:50%;}
	.loan-info li{margin-bottom: 20px; overflow: hidden;}
	.loan-info span{line-height: 24px; display: block;}
	.loan-info .label{color:#888; width:100px; text-align: right; float:left; height:24px;}
	.loan-info .value{margin-left:20px; display: block; float:left; width: 400px;}
}